<template>
	<view class="chatting-container">
		<!-- 自定义导航栏 -->
		<view>
			<u-navbar :is-back="false" title="" :background="{backgroundColor:'#f1f1f1'}">
				<view class="custom-navbar">
					<view class="nav-left" @click="$u.route({type: 'navigateBack'})">
						<u-icon name="arrow-left" color="#000000" size="34"></u-icon>
					</view>
					<view class="nav-center u-flex u-row-center u-col-center" v-if="vuex_current_group">
						<view style="text-align: center">
              {{currentUserRelation.remark || groupTitle}}
              <view v-if="currentUserRelation.remark" style="font-size: 16rpx; color: #666">{{ groupTitle }}</view>
            </view>
            
						<view v-if="vuex_current_group.memberCounts!=undefined&&vuex_current_group.chatGroupType!=0">
							{{"("+vuex_current_group.memberCounts+")"}}
						</view>
						<view v-if="vuex_current_group.memberTipStatus==1">
							<u-icon v-show="vuex_current_group.memberTipStatus==1" name="/static/image/chat/pinbi.png"
								color="#c0c4cc" size="28"></u-icon>
						</view>
					</view>
					<view class="nav-right" @click="toGroupDetail" v-if="vuex_current_group.is_multi !== 'SYSTEM' && vuex_current_group.status !== 'DELETE'">
						<u-icon name="more-dot-fill" color="#000000" size="34"></u-icon>
					</view>
          <view class="d" v-else></view>
				</view>
			</u-navbar>
		</view>
		<view style="width: 100%;" class="u-flex u-row-center u-col-center">
			<u-loading :show="loadingmMore" mode="flower" size="38"></u-loading>
		</view>
		<!-- 公告 -->
		<!-- <view style="position: fixed;z-index: 1000;width: 100%;"
			v-if="loadingmMore==false&&vuex_current_group.advShowFlag==2&&vuex_current_group.chatNotice!=null&&vuex_current_group.chatNotice.length>0">
			<u-notice-bar @close="closeAdvFlag" padding="20rpx 24rpx" close-icon speed="180" type="success"
				:list="vuex_current_group.chatNotice.split(',')"></u-notice-bar>
		</view> -->
		<!-- 信息盒子 -->
		<view class="msg-container" style="flex: 1">
      <u-alert-tips show-icon type="error" title="网络异常" description="与服务器断开连接，请检查网络设置" v-if="!vuex_networkSuccess" style="z-index: 100; margin: 12px;"></u-alert-tips>
			<scroll-view :scroll-y="true" class="msg-box-scroller" 
				:scroll-into-view="scrollIntoView" @scrolltolower="loadCacheMessage"
				:scroll-with-animation="scrollAnimation" @scroll="scrollViewScrolling" @touchstart="hideDrawer">
        <view style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%;">
          
          <view
            v-if="currentUserRelation.mention && currentUserRelation.mention.length"
            style="position: fixed; left: 0; top: 24rpx; z-index: 2; transform: rotate(180deg); text-align: right; padding-right: 24rpx;"
          >
            <text style="background-color: #fff; padding: 0 12rpx; border-radius: 6rpx; color: #1d8e2c;" @tap="goMention">有{{ currentUserRelation.mention.length }}人@提到过你</text>
          </view>

          <view v-for="(item, index) in messageList" :key="item.id">
            <view class="message" v-if="item.status === 'OK'">
              <!-- 系统信息 -->
              <view>
                <!-- 信息时间展示 shouldShowTime(item.created_at)-->
                <view  class="sys-msg-box u-m-b-30" v-show="index%10==0">
                  <view style="text-align: center;color:#909399;">{{formatChatMsgTime(item.created_at)}}</view>
                </view>
              </view>
              <!-- 用户名 -->
              <view v-if="item.type === 'USER'" class="message-item " :class="item.meFlag ? 'right' : 'left'"
                style="margin-bottom: 4rpx; color:#909399;font-size: 24rpx;">
                <text :class="item.meFlag?'marginLeft-100':'margentRight-100'">{{getUserNameOrRemark(item)}}</text>
              </view>
              <view v-if="item.type === 'USER'" class="message-item " :class="item.meFlag ? 'right' : 'left'">
                <!-- 用户头像 -->
                <static-image  :style="vuex_current_group.chatGroupType!=0?'position: relative;top: -16rpx;':''"
                  :src="getUserAvatar(item)" :width="80" :height="80" :border-radius="5" :lazy-load="true"
                  @on-tap="showPersonalInfo(item)"
                />
                
                <!-- contentType = 1 文本信息 -->
                <view class="content" v-if="item.content_type === 'TEXT'" @longpress="showToolTip($event,index)"
                  @contextmenu.prevent="showToolTip($event,index)"
                >
                  <view class="richTextImg">
                    <!-- <rich-text :nodes="parseContent(item)" :selectable="false" preview="false"></rich-text> -->
                    <u-parse :html="parseContent(item)"
                     <!--#ifdef APP-PLUS-->
                      :tag-style="{'.emoji':'width:22px;height:22px;position:relative;top: 10rpx;'}"
                     <!--#endif-->
                     <!--#ifdef H5-->
                     :tag-style="{'.emoji':'width:22px;height:22px;position:relative;top: 2rpx;'}"
                     <!--#endif-->
                    >
                    </u-parse>                    
                  </view>
                </view>

                <!--  图片信息 -->
                <view v-else-if="item.content_type === 'IMAGE'" @longpress="showToolTip($event,index)"
                  @contextmenu.prevent="showToolTip($event,index)"
                  class="content contentType3">
                  <static-image :lazy-load="true"
                    :key="index"
                    :width="200"
                    :height="180"
                    mode="aspectFill" :src="img.path" v-for="(img, index) in item.content.qs"
                    @on-tap="showPic(item, img)"
                  >
                  </static-image>
                </view>

                <!-- 视频信息 -->
                <view v-else-if="item.content_type === 'VIDEO'" @click="boFangVideo(item)"
                  @longpress="showToolTip($event,index)" class="content">
                  <image :src="item.content.c" style="width: 150rpx; height: 120rpx;" mode="aspectFill">
                  </image>
                  <view class="u-flex u-row-center u-col-center"
                    style="width: 150rpx; height: 120rpx; position: absolute; top: 20rpx; left: 20rpx;">
                    <u-icon name="play-circle-fill" color="#f0f0f0" :size="80"></u-icon>
                  </view>
                </view>
                <!-- 语音信息   -->
                <view v-else-if="item.content_type == 'VOICE'" @tap="handleAudio(item)"
                  @longpress="showToolTip($event,index)" class="content contentType2"
                  :class="[{ 'content-type-right': item.meFlag }]" hover-class="contentType2-hover-class"
                  :style="{width:`${130+item.content.d*2}rpx`}">
                  <view class="voice_icon" :class="[
                        { voice_icon_right: item.meFlag },
                        { voice_icon_left: !item.meFlag },
                        { voice_icon_right_an: item.anmitionPlay && item.meFlag },
                        { voice_icon_left_an: item.anmitionPlay && !item.meFlag }
                      ]"></view>
                  <view class="">{{item.content.d*2}}''</view>
                </view>
                <!-- 链接信息   -->
                <view v-else-if="item.content_type == 'LINK'" @tap="handleLink(item)"
                  @longpress="showToolTip($event,index)" class="content content-type-link"
                  :class="[{ 'content-type-right': item.meFlag }]">
                  
                  <u-image :lazy-load="true"
                    :key="index"
                    class="img"
                    mode="aspectFill" :src="item.content.c" style="width: 80rpx; height: 80rpx; margin-left: 12rpx;"
                  >
                    <u-loading slot="loading"></u-loading>
                    <template slot="error">
                      <u-image src="https://hqchatoss.s3.ap-southeast-1.amazonaws.com/chat/4c888e78-a7af-407b-a5b5-d3f023257d17.svg" style="width: 60rpx; height: 60rpx" mode="aspectFill" />
                    </template>
                  </u-image>

                  <div class="info">
                    <div class="title">{{ item.content.t }}</div>
                    <div class="desc">{{ item.content.d }}</div>
                  </div>
                </view>  

                <!-- 文件信息 -->
                <view v-if="item.contentType==5" class="content contentType5"
                  @longpress="showToolTip($event,index)" @click="previewFile(item)">
                  <view class="u-flex u-row-between u-col-center" style="padding: 20rpx 10rpx 5rpx 20rpx;">
                    <view style="width: 300rpx;">
                      <view class="u-line-2  u-p-b-10" style="width: 300rpx;font-size: 30rpx;">
                        {{JSON.parse(item.content).fileName}}
                      </view>
                      <view class="u-m-t-10" style="font-size: 24rpx;color: #909399;">
                        {{JSON.parse(item.content).fileSize}}
                      </view>
                    </view>
                    <view>
                      <view style="width: 90rpx;">
                        <u-image v-if="JSON.parse(item.content).fileSuffix.indexOf('xls')!=-1"
                          src="@/static/image/fileType/xls.png" width="80rpx" height="80rpx"
                          mode="aspectFill">
                        </u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileSuffix==='doc'"
                          src="@/static/image/fileType/docx.png" width="80rpx" height="80rpx"
                          mode="aspectFill"></u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileSuffix==='txt'"
                          src="@/static/image/fileType/txt.png" width="80rpx" height="80rpx"
                          mode="aspectFill"></u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileSuffix==='ppt'"
                          src="@/static/image/fileType/ppt.png" width="80rpx" height="80rpx"
                          mode="aspectFill"></u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileSuffix==='pdf'"
                          src="@/static/image/fileType/pdf.png" width="80rpx" height="80rpx"
                          mode="aspectFill"></u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileSuffix==='mp4'"
                          src="@/static/image/chat/bofang.png" width="80rpx" height="80rpx"
                          mode="aspectFill"></u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileType=='ZIP'"
                          src="@/static/image/fileType/zip.png" width="80rpx" height="80rpx"
                          mode="aspectFill"></u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileSuffix==='img'"
                          :src="JSON.parse(item.content).url" width="80rpx" height="80rpx"
                          mode="aspectFill">
                        </u-image>
                        <u-image v-else-if="JSON.parse(item.content).fileType==='img'"
                          :src="JSON.parse(item.content).url" width="80rpx" height="80rpx"
                          mode="aspectFill">
                        </u-image>
                        <u-image v-else width="80rpx" height="80rpx"
                          src="@/static/image/fileType/unknowfile.png" mode="aspectFill"></u-image>
                      </view>
                    </view>
                  </view>
                  <view style="font-size: 12px;padding: 10rpx 20rpx;color: #909399;" class="u-border-top">聊呗
                  </view>
                </view>
                <!-- 个人名片信息 -->
                <view v-if="item.contentType==8" class="content contentType5"
                  @click="showUserInfoFromForward(item)" @longpress="showToolTip($event,index)">
                  <view class="u-flex u-row-between u-col-center" style="padding: 20rpx 10rpx 10rpx 20rpx;">
                    <view style="width: 300rpx;">
                      <view class="u-line-2" style="width: 300rpx;font-size: 32rpx;">
                        {{formatForwardUserInfo(item)}}
                      </view>
                    </view>
                    <view>
                      <view style="width: 90rpx;">
                        <u-image v-if="JSON.parse(item.content).avatar!=null"
                          :src="JSON.parse(item.content).avatar" width="80rpx" height="80rpx"
                          mode="aspectFill">
                          <view slot="error">
                            <u-image src="@/static/image/chat/defaultPhoto.png" mode="aspectFill"
                              width="80" height="80" border-radius="12">
                            </u-image>
                          </view>
                        </u-image>
                      </view>
                    </view>
                  </view>
                  <view style="font-size: 12px;padding: 10rpx 20rpx;color: #909399;" class="u-border-top">个人名片
                  </view>
                </view>
                <!-- 位置信息 -->
                <view v-if="item.contentType==9" class="content contentType9">
                  <view class="u-flex u-row-between u-col-center" @longpress="showToolTip($event,index)"
                    @click="openLocation(item)">
                    <view style="margin-left: -10rpx;">
                      <u-icon name="map-fill" size="80" color="#19be6b"></u-icon>
                    </view>
                    <view style="margin-top:16rpx;margin-bottom: 8rpx;">
                      <view class="u-line-2" style="max-height: 70rpx;">{{JSON.parse(item.content).name}}
                      </view>
                      <view class="u-line-2" style="font-size: 24rpx;color: #909399;margin-top: 10rpx;">
                        {{JSON.parse(item.content).address}}
                      </view>
                    </view>
                  </view>
                </view>
                <!-- 红包信息 -->
                <view v-if="item.contentType == 7"
                  :style="(JSON.parse(item.content).receiveAllFlag==true||isReceive(item)==true)?'opacity: 0.5;':''"
                  class="content contentType6" @longpress="showToolTip($event,index)"
                  @click="openRedBag(item,index)">
                  <view class="u-flex u-row-between u-col-center">
                    <view class="u-m-r-20">
                      <u-image v-if="JSON.parse(item.content).receiveAllFlag==false" mode="scaleToFill"
                        src="/static/image/chat/redbag.png" width="70rpx" height="80rpx"></u-image>
                      <u-image v-else mode="scaleToFill" src="/static/image/chat/redbag-open.png"
                        width="70rpx" height="80rpx"></u-image>
                    </view>
                    <view style="font-size: 36rpx;min-width: 320rpx;">
                      <view class="u-line-1">{{JSON.parse(item.content).redBagRemark}}</view>
                      <view v-if="JSON.parse(item.content).receiveAllFlag==true"
                        style="font-size: 12px;margin-top: 10rpx;">
                        <text>已被领完</text>
                      </view>
                      <view v-else>
                        <view v-if="isReceive(item)==true&&vuex_current_group.chatGroupType!=0"
                          style="font-size: 12px;margin-top: 10rpx;">
                          <text>已经领取</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view
                    style="font-size: 24rpx;border-top: 1rpx solid #ffffff;margin-top: 20rpx;padding-top: 10rpx;">
                    红包</view>
                </view>
                <!-- 折叠的聊天记录信息 -->
                <view v-if="item.contentType==10" class="content contentType5"
                  @click="openChatRecord(item,index)" @longpress="showToolTip($event,index)">
                  <view style="padding: 20rpx 10rpx 10rpx 20rpx;">
                    <view style="width: 400rpx;">
                      <view class="u-line-2" style="font-size: 32rpx;">{{parseChatRecordTitle(item)}}
                      </view>
                    </view>
                    <view class="u-m-t-10 u-m-b-10">
                      <view style="font-size: 28rpx;color: #aaaaaa;" class="u-line-1"
                        v-for="(contentItem,contentIndex) in JSON.parse(item.content).splice(0,3)"
                        :key="contentIndex">
                        <text>{{parseChatRecord(contentItem)}}</text>
                      </view>
                      <view v-if="JSON.parse(item.content).length>3"
                        style="font-size: 28rpx;color: #aaaaaa;">
                        <text>......</text>
                      </view>
                    </view>
                  </view>
                  <view style="font-size: 12px;padding: 10rpx 20rpx;color: #909399;" class="u-border-top">聊天记录
                  </view>
                </view>
                <!-- 图文或者视频文字 -->
                <view v-if="item.contentType==11||item.contentType==12" class="content contentType-fixed">
                  <view @longpress="showToolTip($event,index)">
                    <view class="u-m-b-10">
                      <u-parse :html="formatComponetContent(item,1)"
                        :tag-style="{'img':'width:26px;height:26px;position:relative;top: 10rpx;'}">
                      </u-parse>
                      <!-- <rich-text :nodes="formatComponetContent(item,1)" :selectable="false" preview="false"></rich-text> -->
                    </view>
                    <!-- 图片文字组合-->
                    <view v-if="item.contentType==11" @tap="showPic(item)"
                      class="u-flex u-row-center u-col-center">
                      <u-image :width="parseImgSize(item,'w')" :height="parseImgSize(item,'h')"
                        :lazy-load="false" :border-radius="10" mode="widthFix"
                        :src="formatComponetContent(item,2)">
                        <u-loading slot="loading"></u-loading>
                      </u-image>
                    </view>
                    <!-- 视频文字组合-->
                    <view v-else class="u-flex u-row-left u-col-center">
                      <view @click="boFangVideo(item)">
                        <view>
                          <image :src="formatComponetContent(item,2)" :style="(formatComponetContent(item,2)==''?'background-color:#000000;':'')+
                            'width:'+parseImgSize(item,'w')+'rpx;height:'+parseImgSize(item,'h')+'rpx'">
                          </image>
                        </view>
                        <view class="u-flex u-row-center u-col-center"
                          :style="'width:'+parseImgSize(item,'w')+'rpx;height:'+parseImgSize(item,'h')+'rpx;margin-top:-'+parseImgSize(item,'h')+'rpx;'">
                          <u-icon name="play-circle-fill" color="#f0f0f0" :size="80"></u-icon>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <!--音视频通话结果-->
                <view v-if="item.contentType==13" class="content">
                  <!-- @click="launchSingleCalling(1)"-->
                  <view class="u-flex u-row-left u-col-center"
                    :style="item.meFlag?'flex-direction: row-reverse;':'flex-direction: row;'">
                    <view class="u-m-l-16 u-m-r-16">
                      <u-image src="/static/image/chat/audio-call.png" width="44rpx" height="44rpx">
                      </u-image>
                    </view>
                    <view>{{parseVideoContent(item)}}</view>
                  </view>
                </view>
              </view>
              <view  :style="{
                'align-self': item.meFlag ? 'flex-end' : 'flex-start',
                'margin-right': item.meFlag ? '110rpx' : '0rpx',
                'margin-left': item.meFlag ? '0rpx' : '110rpx',
                }" 
              v-if="item.content.yy" 
              class="omit-1"
              style="background-color: rgb(227 227 227); line-height: 1.5; max-width: 420rpx; border-radius: 8rpx; padding: 8rpx 40rpx 8rpx 12rpx; word-break: break-all; position: relative; margin-top: 12rpx; color: #959595;
              "
              >{{ item.content.yy.t }}</view>
            </view>
            <view v-else-if="item.status === 'ROLLBACK'" style="text-align: center; padding: 40rpx 0; color: #666; font-size: 28rpx;">
              <div class="tag-msg" style="transform: rotate(180deg)">{{ item.user.name }}撤回了一条消息</div>
            </view>
            <view :id="'msg_'+item.id" :style="{'height': (index + 1) === messageList.length ? '30rpx' : 0}"></view>
          </view>

          <u-empty type="messsage" v-if="!messageList.length" style="transform:rotate(180deg); margin-bottom: 300rpx;" text="还没有消息"></u-empty>

        </view>
        
			</scroll-view>
		</view>


		<!-- 底部模块盒子 -->
		<view class="content" v-if="vuex_current_group.is_multi !== 'SYSTEM'" style="position: relative;">
			<view v-if="vuex_current_group.status === 'DELETE'"  
				class="input-box">
				<view class="u-p-20" style="height: 100%; text-align:center;font-size: 32rpx;font-weight: bold;">
					<view>群聊已经解散</view>
				</view>
			</view>
      <view v-else-if="currentUserRelation.right === 'REJECT'" class="input-box">
        <view class="u-p-20" style="height: 100%; text-align:center;font-size: 32rpx;font-weight: bold;">
					<view>你已被踢出群聊</view>
				</view>
      </view>
			<!-- 底部聊天输入框 -->
			<view v-else class="input-box">
				<view class="input-box-flex">
					<view>
						<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/voice.png')"
							@click="switchChatType('keyboard')"></image>
						<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/keyboard.png')"
							@click="switchChatType('voice')"></image>
					</view>
					<view class="input-box-flex-grow">
						<view class="textArea-box " v-if="chatType === 'voice'">
							<view v-if="fileRemarkObj.showFlag==true&&fileRemarkObj.fileInfo"
								style="width:100rpx;font-size: 28rpx;color:#fa3534">
								<text>[{{fileRemarkObj.tag}}]</text>
							</view>

							<scroll-view :scroll-y="true" :scroll-x="false" class="inputScroll" :show-scrollbar="true">
								<textarea :disabled="connError" style="text-indent:5upx;" auto-height="true"
									placeholder-style="color:#DDDDDD;" :cursor-spacing="10" :confirm-hold="true"
									confirm-type="send" :show-confirm-bar="false" 
									:auto-focus="false" :hold-keyboard="true" 
									@confirm="$noClicks(confirmSendText)" v-model="sendStr" :cursor="l__cursor"
									:maxlength="-1" @input="watchInputMention" ref="textareaRef" />
							</scroll-view>
						</view>
            <view class=" omit-1" v-if="markYingyong" style="background-color: rgb(227 227 227); border-radius: 8rpx; padding: 8rpx 40rpx 8rpx 12rpx; word-break: break-all; position: relative; margin-top: 12rpx; color: #959595;">
              {{ yingyongCoantent }}
              <image class="close" src="/static/svg/close.svg" style="width: 32rpx; height: 32rpx; position: absolute; right: 12rpx; top: 50%; margin-top: -16rpx;;" @tap="markYingyong = null"></image>
            </view>

						<view class="voice_title" v-if="chatType === 'keyboard'" @touchstart.stop.prevent="startVoice"
							@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
							@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
							{{ voiceTitle }}
						</view>
					</view>
					<!-- 功能性按钮 -->
					<view>
						<image class="icon_btn_add" :src="require('@/static/emoji.png')" @click="changeEmojiBox">
						</image>
					</view>
					<view>
						<image class="icon_btn_add" :src="require('@/static/add.png')" @click="changeDrawer"></image>
					</view>

					<view v-show="platos=='android'" @touchend.prevent="$noClicks(sendText)" class="send u-m-l-16"
						:class="chatType === 'voice'?'hidden':''">
						<u-button :loading="sendLoading" type="success" @tap="$noClicks(sendText)" :custom-style="customSendBtnStyle">
							<text>发 送</text>
						</u-button>
					</view>
				</view>
				<view class="fun-box u-border-top" :class="{'show-fun-box':showFunBtn}">
					<u-grid :col="4" hover-class="contentType2-hover-class" :border="false" @click="clickGrid">
						<u-grid-item v-for="(item, index) in funList" :index="index" :key="index"
							:custom-style="{padding:'20rpx 0'}" bg-color="#f8f8f8">
							<view class="u-flex u-row-center u-col-center"
								style="background-color: #FFFFFF;width: 110rpx;height: 110rpx;border-radius: 30rpx;">
								<u-icon :name="item.icon" :size="60"></u-icon>
							</view>
							<view class="grid-text" style="font-size: 24rpx;">{{ item.title }}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="fun-box u-border-top" :class="{'show-fun-box':showEmojiBox}" v-show="showEmojiBox">
					<!-- 表情 :class="{hidden:hideEmoji}"-->
					<swiper class="emoji-swiper" indicator-dots="true" duration="150">
						<swiper-item v-for="(page,pid) in faceList" :key="pid">
							<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
								<image mode="widthFix" :src="'/static/emoji/'+em.url"></image>
							</view>
						</swiper-item>
					</swiper>
					<view v-show="showEmojiBox" style="padding:0rpx 20rpx;position: absolute;bottom: 1rpx;right: 10rpx;
												width: 250rpx;height: 150rpx;z-index: 1000;opacity: 0.9;" class="u-flex u-row-right u-col-center">
						<view class="u-flex u-row-center u-col-center"
							style="border: 1px solid #f1f1f1;border-radius: 10rpx; background-color: #82848a;width: 100rpx;padding: 15rpx 20rpx;margin-right: 8rpx;">
							<view @click="delSendStr()">
								<u-icon name="backspace" size="46" color="#ffffff"></u-icon>
							</view>
						</view>
						<view>
							<u-button :loading="sendLoading" @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发 送
							</u-button>
						</view>
					</view>
				</view>
        <view v-if="sendLoading" class="u-flex u-row-center u-col-center" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; flex-direction: column;
          background-color: rgba(255,255,255,0.5);
        ">
          <text style="color:#ccc">加载中...</text>
          <u-loading :show="true" size="38"></u-loading>
        </view>
			</view>
			<!-- //语音动画 -->
			<view class="voice_an" v-if="recording">
				<view class="voice_an_icon">
					<view id="one" class="wave"></view>
					<view id="two" class="wave"></view>
					<view id="three" class="wave"></view>
					<view id="four" class="wave"></view>
					<view id="five" class="wave"></view>
					<view id="six" class="wave"></view>
					<view id="seven" class="wave"></view>
				</view>
				<view class="text">{{voiceIconText}}</view>
			</view>
      <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: #fff; opacity: 0.5;" v-show="!vuex_networkSuccess"></div>
		</view>

		<!-- 长按菜单 -->
		<chunLei-popups v-model="toolTipFlag" :popData="toolTipData" @tapPopup="tapPopup" :x="toolTipX" :y="toolTipY"
			direction="row" theme="dark" :dynamic="true">
		</chunLei-popups>


		<!-- 红包领取情况 -->
		<u-popup mode="center" v-model="showRedPopFlag" :border-radius="20" :mask-close-able="false"
			@close="showRedPopFlag=false" height="100%" width="100%">
			<view>
				<view class="red-pop-head">
					<view class="u-flex u-row-between u-col-center" style="width: 100%;">
						<view class="u-p-l-30"  @click="showRedPopFlag=false" >
							<u-icon name="arrow-left" color="#ffffff" :size="34"></u-icon>
						</view>
						<view class="u-p-r-30">
							<u-icon name="more-dot-fill" color="#ffffff" :size="34"></u-icon>
						</view>
					</view>
				</view>
				<view class="u-border-bottom" style="text-align: center;color: #000000;padding: 20rpx;padding-top: 0rpx;">
					<view style="font-size: 40rpx;font-weight: bold;" class="u-flex u-row-center u-col-center">
						<view class="u-m-r-20">
							<u-image :src="currentRedBag.avatar" width="70rpx" height="70rpx" :border-radius="10">
								<view slot="error">
									<u-icon name="chat-fill" color="#19be6b" size="64"></u-icon>
								</view>
							</u-image>
						</view>
						<view class="u-flex u-row-left u-col-center">
							<view class="u-line-1" style="max-width:  300rpx;">
								<text v-if="currentRedBag.currentUserId==vuex_userInfo.id">我</text>
								<text v-else>{{currentRedBag.currentUserName}}</text>
							</view>
							<view v-if="currentRedBag.redBagRule==1"
								style="margin-left: 8rpx; font-size: 26rpx;color: #fa9100;">拼</view>
						</view>
					</view>
					<view style="font-size: 32rpx;color: #909399;" class="u-m-t-20">{{currentRedBag.redBagRemark}}
					</view>
					<view v-if="vuex_current_group.chatGroupType!=0"
						style="font-size: 32rpx;text-align: left;color: #909399;">{{currentRedBag.redBagNums}}个红包共{{currentRedBag.redBagValue}}元</view>
				</view>
				<scroll-view class="showRedPopScrollView u-m-b-20 u-m-t-20" :scroll-y="true" :scroll-x="false"
					:style="'height:'+(scrollViewHeight*0.82)+'px'">
					<view style="color: #000000;" v-if="receiveRedBagList.length>0">
						<view v-for="(record,index) in receiveRedBagList" :key="index"
							:style="record.userId==vuex_userInfo.id?'background-color:#f0f0f0;':''"
							class="u-flex u-row-between u-col-center u-p-20 u-border-bottom">
							<view class="u-flex u-row-left u-col-center">
								<view>
									<u-image :border-radius="10" :src="record.avatar" width="80rpx" height="80rpx">
									</u-image>
								</view>
								<view class="u-m-l-10">
									<view>
										<text v-if="record.userId==vuex_userInfo.id">我</text>
										<text v-else>{{record.userName}}</text>
									</view>
									<view style="color: #909399;margin-top: 6rpx;">{{record.created_at.substring(5,16)}}
									</view>
								</view>
							</view>
							<view style="text-align: right;">
								<view style="font-weight: bold;font-size: 32rpx;">{{record.tradeValue}}元</view>
								<view style="color: #fa9100;margin-top: 6rpx;"
									v-if="currentRedBag.redBagRule==1&&record.maxFlag==true&&currentRedBag.receiveAllFlag==true">
									<u-icon name="thumb-up-fill" :size="32" color="#fa9100" label="手气最佳"
										label-color="#fa9100"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view v-else style="text-align: center;color: #909399;font-size: 40rpx;margin-top: 200rpx;">
						<view v-if="currentRedBag.receiveAllFlag">
							<text>已领取~</text>
						</view>
						<view v-else>
							<text>待领取~</text>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="u-flex u-row-center u-col-center u-p-20"
					style="width: 100%; position: absolute;bottom: 1rpx;">
					<u-icon @click="showRedPopFlag=false" name="close" size="40" label="关闭" label-pos="bottom"></u-icon>
				</view> -->
			</view>
		</u-popup>

		<!-- 二维码解析结果界面 -->
		<template v-if="qrModelFlag">
			<qr-info-pop :qrModelFlag="qrModelFlag" :windowHeight="windowHeight" :qrModelInfo="qrModelInfo"
				@closeQRModel="closeQRModel"></qr-info-pop>
		</template>
		<!-- 视频预览 -->
		<view v-if="previewVideoFlag==true">
			<videoPlayer :previewVideoFlag="previewVideoFlag" :previewVideoSrc="previewVideoSrc"
				@quitPlay="stopPlayVideo()"></videoPlayer>
		</view>

    <u-popup v-model="showMention" mode="bottom">
      <div >
        <div style="display: flex; align-items: center; padding: 24rpx; margin-bottom: 24rpx;">
          <image class="a" src="/static/svg/down.svg" style="width: 40rpx; height: 40rpx" @tap="showMention = false"></image>
          <div style="flex: 1; text-align: center;">选择提醒的人</div>
          <u-button size="mini" :disabled="!mentionSelect.length" type="success" @tap="finishMention">完成</u-button>
        </div>
        <!-- <u-input placeholder="搜索"></u-input> -->
        <scroll-view style="height: 500rpx" :scroll-y="true">
          <view class="mention-item" style="display: flex; align-items: center; margin-bottom: 34rpx; padding: 0 24rpx" v-for="item in vuex_current_group.user_group_relations"
            :key="item.id"
              @tap="mentionSelect.includes(item) ? mentionSelect.splice(mentionSelect.indexOf(item), 1) : mentionSelect.push(item)"
            >
            <image src="/static/svg/mention-check.svg" style="width: 42rpx; height: 42rpx; margin-right: 24rpx; " v-if="mentionSelect.includes(item)"/>
            <image src="/static/svg/mention-uncheck.svg" style="width: 42rpx; height: 42rpx; margin-right: 24rpx; " v-else/>
            <static-image :src="item.user.avatar" :width="80" :height="80" :radius="12"></static-image>
            <view style="flex: 1; font-size: 36rpx; margin-left: 24rpx">{{ getUserNameOrRemark(item) }}</view>
          </view>
        </scroll-view>
      </div>
    </u-popup>
	</view>
</template>

<script>
	import permission from '@/util/mobilePermission/permission.js';
  import {uploader} from '@/util/uploader.js'

  import {
		faceUtils,
    $confirm
	} from '@/util/util.js';
  import getVideoCover from '@/common/get_video_cover.js'
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
	import qrInfoPop from '@/components/qr-info-pop/qr-info-pop.vue';
	import videoPlayer from '@/components/videoPlayer/videoPlayer.vue';
  import Socket from '@/util/socket'
  import * as localMessage from '@/util/local-message.js'
  import noticeVoice from '@/util/notice-voice.js'
	var previewSrcArr = [];
	export default {
		components: {
			chunLeiPopups,
			qrInfoPop,
			videoPlayer
		},
		data() {
			return {
        l__cursor: -1,
        scrollTop: 0,
        sendLoading: false,
        anmitionPlay: false,
				lastTimeShown:null,
				timmer: null,
				reConnTips: "数据加载中...",
				reConntask: null,
				noClick: true,
				platos: 'ios',
				//当前群聊
				forbidFlag: false, //禁言
				pageNum: 1,
				pageSize: 15,
				messageList: [],
				scrollAnimation: false,
				scrollIntoView: '',
				loadingmMore: false,
				chatType: 'voice', // 图标类型 'voice'语音 'keyboard'键盘
				customSendBtnStyle: {
					padding: '10rpx 20rpx',
				},
				sendStr: '', //发送的文字信息
				Recorder: uni.getRecorderManager(),
				Audio: uni.createInnerAudioContext(),
				recording: false, //标识是否正在录音
				isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
				voiceInterval: null,
				voiceTime: 0, //总共录音时长
				canSend: true, //是否可以发送
				PointY: 0, //坐标位置
				voiceIconText: "正在录音...",
				voiceTitle: '按住 说话',
				AudioExam: null, //正在播放音频的实例
				showFunBtn: false, //是否展示功能型按钮
				showEmojiBox: false, //是否显示表情弹窗
				funList: [{
						id: 1,
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					// {
					// 	id: 2,
					// 	icon: "camera-fill",
					// 	title: "视频",
					// 	uploadType: ["camera"]
					// },
					// {
					// 	id: 3,
					// 	icon: "/static/image/chat/video.png",
					// 	title: "视频通话",
					// },
					// {
					// 	id: 4,
					// 	icon: "map-fill",
					// 	title: "位置",
					// },
					// {
					// 	id: 5,
					// 	icon: "/static/image/chat/gird/redbag.png",
					// 	title: "红包",
					// },
					// {
					// 	id: 6,
					// 	icon: "/static/image/chat/gird/zhuanzhang.png",
					// 	title: "个人名片",
					// },
					// {
					// 	id: 7,
					// 	icon: "/static/image/chat/call.png",
					// 	title: "语音通话",
					// },
					// {
					// 	id: 8,
					// 	icon: "/static/image/chat/dir.png",
					// 	title: "文件",
					// 	uploadType: ["camera"]
					// },
					/* 		{
								id:9,
								icon: "/static/image/chat/gird/collcetion.png",
								title: "收藏",
							},
							{
								id:10,
								icon: "/static/image/chat/gird/voiceInput.png",
								title: "语音输入",
							}, */
				],
				addressObj: {
					chooseFlag: false,
				},
				showFileRemark: false,
				//发送视频,图片等信息的时候附带的备注信息
				fileRemarkObj: {
					showFlag: false,
					tag: "图片",
					fileInfo: null,
				},
				inputFocusFlag: false,
				windowHeight: 0,
				scrollViewHeight: 600,
				faceList: faceUtils.emojiList(),
				faceMap: faceUtils.faces(),
				connError: false,
				toolTipFlag: false,
				toolTipData: [],
				toolTipX: 0,
				toolTipY: 0,
				currentHandleMsg: {},
				delPopUpObj: {
					isShow: false,
					param: '',
				},
				currentRedBag: {},
				showRedPopFlag: false,
				receiveRedBagList: [],
				qrModelFlag: false,
				qrModelInfo: {},
				previewVideoFlag: false,
				previewVideoSrc: '',
				videoMsgFlag: true,
        autoBackToBottom: true,
        showMention: false,
        mentionSelect: [],
        markYingyong: null,
			};
		},
		created: function() {
			let scrollViewHeight = this.$u.sys().windowHeight - 160;
			this.windowHeight = this.$u.sys().windowHeight;
			this.scrollViewHeight = scrollViewHeight;
      this.contextMentions = []
      
			if (uni.getSystemInfoSync().platform == "android") {
				this.platos = "android"
			} else {
				this.platos = "ios"
			}
			previewSrcArr=[];
		},
		watch: {
			scrollViewHeight() {
        if (this.messageList.length > 0) {
          this.scrollIntoView = "msg_"
          this.$nextTick(() => {
            this.scrollIntoView = "msg_" + this.messageList[this.messageList.length - 1].id;
          })
        }
			},
      vuex_networkSuccess () {
        if (!this.vuex_networkSuccess) {
          this.markFail = true
        } else {
          if (this.markFail) {
            this.markFail = false
            Socket.joinGroup({
              _this: this,
              groupId: Number(this.vuex_current_group.id),
            })
            // 重连拉消息
            this.loadNowMessage()
          }
        }
      }
		},
    computed: {
      groupTitle () {
        if (!this.vuex_current_group.id) return '';
        if (['GROUP', 'SYSTEM'].includes(this.vuex_current_group.is_multi)) return this.vuex_current_group.title
        for (const item of this.vuex_current_group.user_group_relations) {
          if (item.user_id !== this.vuex_userInfo.id) return this.getUserNameOrRemark(item)
        }
        return ''
      },
      currentUserRelation () {
        if(!this.vuex_current_group.id) return {}
        const re = this.vuex_current_group.user_group_relations.find(s => s.user_id === this.vuex_userInfo.id)
        if (re.is_multi === 'SYSTEM') this.scrollViewHeight = this.windowHeight
        return re
      },
      yingyongCoantent () {
        if (!this.markYingyong) return ''
        const un = `${this.getUserNameOrRemark(this.markYingyong)}:`
        switch (this.markYingyong.content_type) {
          case 'TEXT':
            let copyContent = this.markYingyong.content.t.replace(/(<img class=\"emoji\" alt=\")|(\" src=\"https:\/\/hqchatoss.s3.ap-southeast-1.amazonaws.com\/emoji\/(.*?).gif\" ignore>)/g, '');
						let formatStr = this.replaceReseverEmoji(copyContent)
            return `${un}${formatStr}`
          case 'IMAGE': return `${un}[图片]`
          case 'VOICE': return `${un}[语音]`
          case 'VIDEO': return `${un}[视频]`
        }
        return un
      }
    },
		//监听信息滚动
		onReady() {
			uni.onKeyboardHeightChange(res => {
				//如果键盘弹起
				if (res.height != 0) {
					this.showFunBtn = false;
					this.showEmojiBox = false;
					this.scrollViewHeight = this.$u.sys().windowHeight - res.height - 130;
				}
				//键盘收起
				else {
					if (!(this.showEmojiBox || this.showFunBtn)) {
						this.scrollViewHeight = this.$u.sys().windowHeight - 150;
					}
				}
			});
		},


		//页面加载获取群聊信息
		onLoad(option) {
      this.options = option
			previewSrcArr=[];
			//console.log("聊天界面初始化参数", option);
			this.currentChatGroupId = option.chatGroupId;
			this.getChatGroupInfo(true);
      Socket.joinGroup({
        _this: this,
        groupId: Number(option.chatGroupId),
      })
			//录音开始事件
			this.Recorder.onStart(e => {
				this.beginVoice();
			});
			//录音结束事件
			this.Recorder.onStop(res => {
				clearInterval(this.voiceInterval);
				this.handleRecorder(res);
			});

			//音频停止事件
			this.Audio.onStop(e => {
				this.closeAnmition();
			});

			//音频播放结束事件
			this.Audio.onEnded(e => {
				this.closeAnmition();
			});

      uni.$on('rollbackMessage', this.rollbackMessage)
      uni.$on('receiveMessage', this.loadMessage)
      uni.$on('drop_relations', () => {
        this.getChatGroupInfo()
      })
      uni.$on('refreshChattingInfo_' + option.chatGroupId, () => {
        this.getChatGroupInfo()
      })
		},
		//页面显示初始化
		onShow: function() {
			console.log('onShow')
      if (uni.getStorageSync('group-need-update')) {
        uni.removeStorageSync('group-need-update')
        this.getChatGroupInfo(true)
      }
      if (uni.getStorageSync('need-loadNowMessage')) {
        uni.removeStorageSync('need-loadNowMessage')
        this.loadNowMessage()
      }
		},
		onHide: function() {
			this.Audio.stop();
		},
		onUnload() {
			this.scrollIntoView = "";
			this.Audio.stop();
			previewSrcArr=[];
      clearTimeout(this.timer)
      Socket.leaveGroup({
        groupId: this.vuex_current_group.id,
      })
      this.Audio.stop();
      //退出聊天界面的时候也需要重置用户的未读信息为已读,因为存储的时候非发送者都是存的未读状态
      this.$u.api.chatGroup.clearUnReadNum({
        id: this.currentUserRelation.id,
      })

      uni.$off('rollbackMessage', this.rollbackMessage)
      uni.$off('receiveMessage', this.loadMessage)
      uni.$off('drop_relations', this.loadMessage)
      uni.$off('refreshChattingInfo_' + this.vuex_current_group.id)
		},

		methods: {
      relationDrop (relations) {
        if (relations.includes(this.currentUserRelation.id)) {
          this.getChatGroupInfo(true);
        }
      },
      getUserAvatar (item) {
        const relation = this.vuex_current_group.user_group_relations.find((u) => {
          return u.user_id === item.user_id
        })
        return relation.user.avatar
      },
      getUserNameOrRemark (item) {
        // const user = this.vuex_contactOringinData.find((u) => {
        //   return u.to_user_id === item.user_id || u.from_user_id === item.user_id
        // })
        // if (user) {
        //   let remark = ''
        //   if (user.to_user_id === item.user_id) {
        //     remark = user.to_remark
        //   } else {
        //     remark = user.from_remark
        //   }
        //   if (remark) return remark
        // }
        if (this.vuex_current_group.is_multi === 'PRIVATE') {
          const user = this.vuex_contactOringinData.find((u) => {
            return u.to_user_id === item.user_id || u.from_user_id === item.user_id
          })
          if (user) {
            let remark = ''
            if (user.to_user_id === item.user_id) {
              remark = user.to_remark
            } else {
              remark = user.from_remark
            }
            if (remark) return remark
          }
        }
        const relation = this.vuex_current_group.user_group_relations.find((u) => {
          return u.user_id === item.user_id
        })
        if (relation.my_remark) return relation.my_remark
        return relation.user.name
      },
			shouldShowTime(timeStr) {
        let currentMessageTime= this.globalUtil.parseTime(timeStr).getTime();
        if(this.lastTimeShown === null) {
            this.lastTimeShown = currentMessageTime
            return true
        };
        let diff = new Date(currentMessageTime) - new Date(this.lastTimeShown)
        let diffMinutes = Math.floor(diff / (1000 * 60))
        // 调整这个值来更改显示时间戳的频率
        let thresholdMinutes = 3
        if(diffMinutes >= thresholdMinutes) {
            this.lastTimeShown = currentMessageTime
            return true
        } else {
            return false
        }
			},
			formatChatMsgTime(timeStr){
				let currentMessageTime= this.globalUtil.parseTime(timeStr).getTime();
				let timeFormat= this.globalUtil.formatChatMsgTime(currentMessageTime);
				if(timeFormat){
					return timeFormat;
				}else{
					return timeStr.substring(10,16);
				}
			},
			//跳转群组详情
			toGroupDetail: function() {
				this.$u.route({
          url: 'pages/chat/chatGroup/chatDetail',
					params: {
            chatGroupId: this.vuex_current_group.id,
          }
				});
			},
			//获取群组信息
			async getChatGroupInfo(historyMsgLoadFlag) {
        // this.groupLoading = true
        const cacheGroupData = uni.getStorageSync('group-' + this.options.chatGroupId)
        if (cacheGroupData) {
          this.$u.vuex_set_current_group(cacheGroupData)
          this.$u.vuex_current_group(this.options.chatGroupId).then(() => {
            uni.setStorageSync('group-' + this.options.chatGroupId, this.vuex_current_group)
          })
        } else {
          await this.$u.vuex_current_group(this.options.chatGroupId)
          uni.setStorageSync('group-' + this.options.chatGroupId, this.vuex_current_group)
        }
				if (this.currentUserRelation.right === 'REJECT') {
          this.globalUtil.utilAlert("你已被踢出群聊");
          Socket.leaveGroup({
            groupId: this.options.chatGroupId,
          })
          return
        }

        if (this.vuex_current_group.status === 'DELETE') {
          this.forbidFlag = true;
        } else {
          this.forbidFlag = false;
        }
        //console.log("群信息", that.currentChatGroup);
        if(historyMsgLoadFlag){
          console.log("需要重新加载历史记录");
          this.loadCacheMessage();
        }
			},
      loadCacheMessage () {
        const oldScrollViewId = this.messageList[this.messageList.length - 1]?.id
        const cacheMessages = localMessage.getMessageList({
          group_id: this.vuex_current_group.id,
          last_id: oldScrollViewId,
        })
        if (cacheMessages.length) {
          this.messageList.push(...cacheMessages)
          if (!oldScrollViewId) {
            this.loadNowMessage()
          }
          return
        } else {
          this.loadMoreHistoryMsg()
        }
      },

      async loadNowMessage () {
        if (this.loadingmMore) return
				const param = {
					group_id: this.vuex_current_group.id,
          first_id: this.messageList[0]?.id || 0,
				};
				this.loadingmMore = true;
				const res = await this.$u.api.chatGroup.getChatGroupHistoryMessage(param)
        this.loadingmMore = false;
        if (res.code == 200) {
          const messages = this.resloveMessages(res.data)
          localMessage.addMessages(messages, this.vuex_current_group.id)
          this.messageList.unshift(...messages)
        }
      },
      
			//向上滑动加载更多历史信息数据
			async loadMoreHistoryMsg () {
				/* 防止滑动太快,导致记录重复 */
				if (this.loadingmMore) return
        const oldScrollViewId = this.messageList[this.messageList.length - 1]?.id
				const param = {
					group_id: this.vuex_current_group.id,
          last_id: oldScrollViewId,
				};
				console.log("上划加载更多历史数据分页参数", param);
				this.loadingmMore = true;
				const res = await this.$u.api.chatGroup.getChatGroupHistoryMessage(param)
        this.loadingmMore = false;
        if (res.code == 200) {
          const messages = this.resloveMessages(res.data)
          localMessage.putMessage(messages, this.vuex_current_group.id)
          this.messageList.push(...messages)
        }
			},

      goMention () {
        const mention = this.currentUserRelation.mention.pop()
        if (mention) {
          this.$u.api.chatGroup.removeMention({
            relation_id: this.currentUserRelation.id,
            remove_mention: [mention]
          }).then(s => {
            this.$u.vuex_current_group(this.options.chatGroupId)
          })
          this.scrollIntoView = "msg_" + mention
        }
      },
      resloveMessages (messages) {
        const removeMention = []
        for (var i = 0; i < messages.length; i++) {
          const msg = messages[i]
          let contentType = msg.content_type;
          if (contentType === 'VOICE') {
            msg.anmitionPlay = false;
          } else if (contentType === 'TEXT') {
            if (msg.content.m && msg.content.m.length) {
              if (msg.content.m.includes(this.currentUserRelation.id)) {
                removeMention.push(msg.id)
              }
            }
          }
          msg.meFlag = msg.user_id === this.vuex_userInfo.id
        }
        messages.reverse()
        
        if (removeMention.length) {
          // 去除mention提示
          this.$u.api.chatGroup.removeMention({
            relation_id: this.currentUserRelation.id,
            remove_mention: Array.from(new Set(removeMention))
          }).then(s => {
            this.$u.vuex_current_group(this.options.chatGroupId)
          })
        }

        return messages
      },

      async loadMessage (msgs) {
        const datas = msgs.map(s => {
          if (s.content_type === 'VOICE') {
            s.anmitionPlay = false
          }
          s.meFlag = s.user_id === this.vuex_userInfo.id
          return s
        })
        datas.reverse()
        this.messageList.unshift(...datas)
        if (this.messageList.length > 50) {
          this.messageList.splice(0, this.messageList.length - 50)
        }
        localMessage.addMessages(datas, this.vuex_current_group.id)
      },
			//操作项
			async showToolTip (e, index) {
        const touch = e.touches[0] || e
				this.toolTipX = touch.clientX;
				this.toolTipY = touch.clientY;
   
				this.currentHandleMsg = this.messageList[index];
				console.log("this.currentHandleMsg", this.currentHandleMsg);
				this.currentHandleMsg.msgIndex = index;
				const contentType = this.currentHandleMsg.content_type;
        this.toolTipData = [{
            id: 1,
            icon: '/static/image/chat/copy.png',
            title: '复制',
            disabled: (contentType !== 'TEXT')
          },
          {
            id: 2,
            icon: '/static/image/chat/zhuanfa.png',
            title: '转发',
            disabled: false
          },
          {
            id: 3,
            icon: '/static/image/chat/revert.png',
            title: '撤回',
            disabled: (() => {
              if (!this.currentHandleMsg.meFlag) return true
              const sendTimeMills = this.globalUtil.parseTime(this.currentHandleMsg.created_at).getTime();
              const nowTimeMills = new Date().getTime();
					    const diff = nowTimeMills - sendTimeMills;
					    const twoMinutes = 60 * 1000 * 2; //2分钟
              if (diff > twoMinutes) return true
              return false
            })()
          },
          {
            id: 4,
            icon: '/static/image/chat/pdelete.png',
            title: '删除',
            disabled: (() => {
              if (!this.currentHandleMsg.meFlag) return false
              const sendTimeMills = this.globalUtil.parseTime(this.currentHandleMsg.created_at).getTime();
              const nowTimeMills = new Date().getTime();
					    const diff = nowTimeMills - sendTimeMills;
					    const twoMinutes = 60 * 1000 * 2; //2分钟
              if (diff > twoMinutes) return false
              return true
            })()
          },
          {
            id: 5,
            icon: '/static/image/chat/collection.png',
            title: '收藏',
            disabled: false
          },
          {
            id: 6,
            icon: '/static/image/chat/yinyong.png',
            title: '引用',
            disabled: false
          },
        ]
				this.$nextTick(() => {
					this.toolTipFlag = true;
				})
			},
			tapPopup(e) {
				let that = this;
				console.log(" that.currentHandleMsg", that.currentHandleMsg);
				//console.log("操作选项",e);
				if (e.title == "撤回") {
					this.revertMsg();
				} else if (e.title === '删除') {
          this.currentHandleMsg.status = 'DELETE'
          localMessage.updateLocalMessage(this.currentHandleMsg)
        } else if (e.title == "复制") {
					let content = that.currentHandleMsg.content;
					if (content.t.length > 0) {
						let copyContent = content.t.replace(/(<img class=\"emoji\" alt=\")|(\" src=\"https:\/\/hqchatoss.s3.ap-southeast-1.amazonaws.com\/emoji\/(.*?).gif\" ignore>)/g, '');
						let formatStr = this.replaceReseverEmoji(copyContent);
						that.globalUtil.uniCopy({
							content: formatStr,
							success: (res) => {
								uni.showToast({
									title: res,
									icon: 'none'
								})
							},
							error: (e) => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 3000,
								})
							}
						})
					}
					that.toolTipFlag = false;
				} else if (e.title == "转发") {
					that.toolTipFlag = false;
					that.$u.route({
						url: '/pages/chat/chatGroup/msgForward',
						params: {
							msgList:encodeURIComponent(JSON.stringify([that.currentHandleMsg])),
							sendType: 1, //1 单条转发 2多条转发
							fromChatGroupId: that.vuex_current_group.id
						}
					})
				} else if (e.title == "多选") {
					that.toolTipFlag = false;
					that.$u.route({
						url: '/pages/chat/chatting/chatting-checkbox',
						params: {
							groupId: that.vuex_current_group.id,
							pageNum: that.pageNum,
							selectMsgId: that.currentHandleMsg.id,
						}
					})
				} else if (e.title == "收藏") {
          this.$u.api.chatGroup.addFavirite({
            message_id: that.currentHandleMsg.id
          }).then(res => {
            console.log("收藏消息", res);
            if (res.code == 200) {
              that.globalUtil.utilAlert("已添加到收藏");
            } else {
              that.globalUtil.utilAlert(res.message);
            }
          })
				} else if (e.title === '引用') {
          this.markYingyong = this.currentHandleMsg
        }
			},

			//判断是否可以撤回信息,根据时间推算
			async revertMsg() {
        await this.$u.api.chatGroup.revertMessageById({
          msg_id: this.currentHandleMsg.id,
          group_id: this.vuex_current_group.id
        })
        this.$u.toast('撤回成功！')
        this.currentHandleMsg.status = 'ROLLBACK'
			},
      rollbackMessage (params) {
        const msg = this.messageList.find(s => s.id === params.id)
        if (msg) {
          msg.status = 'ROLLBACK'
        }
        const yyMsg = this.messageList.find(s => s.content.yy?.m_id === params.id)
        if (yyMsg) yyMsg.content.yy.t = '引用已被撤回'
      },
			/*----------------------------------------------------录音相关 start-------------------------------------- */
			//准备开始录音
			startVoice(e) {
        // #ifdef H5
				this.globalUtil.utilAlert("h5暂不支持录音!");
        return
        // #endif
        
				if (!this.Audio.paused) {
					//如果音频正在播放 先暂停。
					this.stopAudio(this.AudioExam)
				}
				this.recording = true;
				this.isStopVoice = false;
				this.canSend = true;
				this.voiceIconText = "正在录音..."
				this.PointY = e.touches[0].clientY;
				this.Recorder.start({
					format: 'mp3'
				});
			},
			//录音已经开始
			beginVoice() {
				let that = this;
				if (that.isStopVoice) {
					that.Recorder.stop();
					return;
				}
				that.voiceTitle = '松开 结束'
				that.voiceInterval = setInterval(() => {
					console.log("that.voiceTime", that.voiceTime);
					if (that.voiceTime > 49) {
						that.voiceIconText = "录音结束倒计时[" + (60 - that.voiceTime) + "]s";
					};
					if (that.voiceTime == 60) {
						clearInterval(that.voiceInterval);
						that.endVoice();
					}
					that.voiceTime++;
				}, 1000)
			},
			//move 正在录音中
			moveVoice(e) {
				const PointY = e.touches[0].clientY;
				const slideY = this.PointY - PointY;
				if (slideY > uni.upx2px(120)) {
					this.canSend = false;
					this.voiceIconText = '松开手指 取消发送 '
				} else if (slideY > uni.upx2px(60)) {
					this.canSend = true;
					this.voiceIconText = '手指上滑 取消发送 '
				} else {
					this.voiceIconText = '正在录音... '
				}
			},
			//结束录音
			endVoice() {
				this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
				this.Recorder.stop();
				this.voiceTitle = '按住 说话'
			},
			//录音被打断
			cancelVoice(e) {
				console.log("路由被打断", e);
				this.voiceTime = 0;
				this.voiceTitle = '按住 说话';
				this.canSend = false;
				this.Recorder.stop();
			},
			//处理录音文件
			async handleRecorder({
				tempFilePath,
				duration
			}) {
				if (this.voiceTime < 1) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 500)
					return;
				}
				let contentDuration = this.voiceTime;
				this.voiceTime = 0;
				this.recording = false;
				clearInterval(this.voiceInterval);
				//文件放在自己的服务器
				let uploadFileUrl = this.$u.api.multipartAddress.updload + "/chattingFiles";
				//文件放在阿里云oss
				//let uploadFileUrl= this.$u.api.multipartAddress.uploadAliYun+"/chattingAudio";
				let voiceFile = {
					type: 4, //信息内容类型   1-文本 2-图片 3-视频  4-语音信息 5-文件 6-其他
					filePath: tempFilePath,
					uploadUrl: uploadFileUrl,
					contentDuration: Math.ceil(contentDuration)
				}
				console.log("语音文件", voiceFile);
				if (this.canSend) {
          const mp3File = await uploader({
            file_path: voiceFile.filePath,
            file_key: 'do.mp3'
          })
          this.sendMsg('USER', 'VOICE', {
            v: mp3File,
            d: voiceFile.contentDuration
          })
				} else {
					console.log("=====已经取消发送语音信息====")
				}
			},
			//控制播放还是暂停音频文件
			handleAudio(item) {
				this.AudioExam = item;
				this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
			},
			//播放音频
			playAudio(item) {
				this.Audio.src = item.content.v;
				this.Audio.hasBeenSentId = item.id;
				this.Audio.play();
				item.anmitionPlay = true;
			},
			//停止音频
			stopAudio(item) {
				item.anmitionPlay = false;
				this.Audio.src = '';
				this.Audio.stop();
			},
			//关闭动画
			closeAnmition() {
				const hasBeenSentId = this.Audio.hasBeenSentId;
				const item = this.messageList.find(it => it.id == hasBeenSentId);
				if (item) item.anmitionPlay = false;
			},
			/*-------------------------------------录音相关方法块  end---------------------------------------------------*/
			//添加表情
			addEmoji(em) {
				this.sendStr += em.alt;
			},
			confirmSendText: function(e) {
				let that = this;
				that.sendText();
			},

			//发送文本信息
			sendText: function() {
				let that = this;
				if (that.sendStr.length < 1) {
					uni.hideKeyboard();
					that.globalUtil.utilAlert("不能发送空字符串");
					return;
				}
				//如果文字中有表情,需要转换处理
				let formatStr = this.replaceEmoji(this.sendStr);
        
				let content = {
					"t": formatStr, //文本内容
				}
				//判断是不是图文结合的
				//let showFlag = this.fileRemarkObj.showFlag;
				//let fileInfo = this.fileRemarkObj.fileInfo;
				//if (showFlag && fileInfo) {
				//	that.sendComponentMsg(formatStr);
				//} else {
				that.sendMsg('USER', "TEXT", content);
				//}
			},
			delSendStr: function() {
				if (this.sendStr.length > 0) {
					this.sendStr = this.sendStr.substring(0, this.sendStr.length - 4);
				}
			},
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					for (let i = 0; i < this.faceList.length; i++) {
						let row = this.faceList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								let onlinePath = 'https://hqchatoss.s3.ap-southeast-1.amazonaws.com/emoji/'
								let imgstr = '<img class="emoji" alt="'+EM.alt+'" src="'+onlinePath+EM.url+'" ignore>';
								return imgstr;
							}
						}
					}
				});
				//console.log("replacedStr", replacedStr);
				return replacedStr;
			},

			replaceReseverEmoji: function(str) {
				let replacedStr = str.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
					let alt = face.replace(/^face/g, '');
					return alt;
				})
				console.log("replacedStr", replacedStr);
				return replacedStr;
			},

			//发送消息
			sendMsg: async function(msgType, contentType, contentObj) {
        this.sendLoading = true
				let that = this;
        contentObj.m = Array.from(new Set(this.contextMentions.map(s => s.id)));
        this.contextMentions = []
        let msg = {
          content_type: contentType,
          type: msgType,
          user_id: that.vuex_userInfo.id, //发送信息的人
          group_id: that.vuex_current_group.id, //聊天群聊id
          content: contentObj,
          empty: this.vuex_current_group.empty
        }

        if (this.markYingyong) {
          msg.content.yy = {
            t: this.yingyongCoantent,
            m_id: this.markYingyong.id
          }
          msg.yy_msg_id = this.markYingyong.id
        }
        
        if (msg.content_type === 'close-TEXT' && /^(http|https)+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_%&?/.=]+$/.test(msg.content.t)) {
          // 纯html链接
          const res = await this.$u.api.imUser.loadUrl({
            url: msg.content.t
          })
          if (res.data && res.data.t) {
            msg.content_type = 'LINK'
            msg.content = {
              ...res.data,
              ...msg.content.t
            }
          }
        }

        // Socket.emit('message', msg)
        await this.$u.api.chatGroup.sendMsg(msg);
        this.markYingyong = null
        this.sendStr = ''
        // this.loadMessage()
        this.sendLoading = false
        setTimeout(() => {
          noticeVoice.playSend()
        }, 200)
			},
			//接收到信息,渲染到信息面板上去,
			//格式化信息内容
			parseContent: function(item) {
				let that=this;
				let msgType = item.type; 
				let contentType = item.content_type;//文本信息
				if (contentType === 'TEXT') {
					return item.content.t;
				}
				//图片信息
				else if (contentType == 2) {
					let msgId= item.id;
					let localSrc= uni.getStorageSync("image"+msgId);
					if(localSrc){
						return localSrc;
					}
					let url = JSON.parse(item.content).url;
					if (url) {
						if(previewSrcArr.indexOf(url)==-1){
							previewSrcArr.unshift(url);
						};
						that.saveLocal(item);
					}
					return url;
				} else if (contentType == 3) {
					let msgId= item.id;
					let localSrc= uni.getStorageSync("image"+msgId);
					if(localSrc){
						return localSrc;
					};
					let videoContent = JSON.parse(item.content);
					let subImgInfo = videoContent.subImgInfo;
					if (subImgInfo) {
						that.saveLocal(item);
						return subImgInfo.url;
					} else {
						return "";
					}					
				} else {
					return JSON.parse(item.content).url;
				}
			},

			parseVideoContent: function(item) {
				let content = JSON.parse(item.content);
				let totalTime = content.totalTime;
				if (totalTime == 0) {
					return "通话未接通";
				} else {
					let timeDuring = this.globalUtil.formatSeconds(totalTime);
					return "通话时长 " + timeDuring;
				}
			},

			//格式化组合信息内容
			formatComponetContent: function(item, type) {
				if (type == 1) {
					let msgStr = JSON.parse(item.content).textDesc;
					let transText = this.globalUtil.transform(msgStr, "", "");
					return transText;
				}
				if (type == 2) {
					let content = JSON.parse(item.content);
					if (item.contentType == 12) {
						let subImgInfo = content.fileInfo.subImgInfo;
						if (subImgInfo) {
							return subImgInfo.url;
						} else {
							return "";
						}
					}
					if (item.contentType == 11) {
						let url= content.url;
						if(previewSrcArr.indexOf(url)==-1){
							previewSrcArr.unshift(url);
						};
						return content.url;
					}

				}
			},

			showNotice: function() {
				let that = this;
				console.log("查看群公告");
			},

			parseShowTime: function(item) {
				if (item.created_at == null) {
					return false;
				}
				let crteateTimeStr = item.created_at.replace(/-/g, "/"); //时间转换
				let created_at = new Date(crteateTimeStr).getTime();
				let nowTime = new Date().getTime();
				let during = nowTime - created_at;
				if (during > 1000 * 60 * 3) {
					return true;
				} else {
					return false;
				}
				//Date.now()-new Date(create_time)>3*60*60*1000

			},

			//内容转换(暂时不用)
			transformContent: function(message) {
				let contentStr = message.content;
				let contentObj = JSON.parse(contentStr);
				let text = contentObj.text;
				let fileSuffix = contentObj.fileSuffix;
				let fileSize = contentObj.fileSize;
				//信息内容转换
				let transText = this.globalUtil.transform(text, fileSize, fileSuffix);
				contentObj.text = transText;
				message.content = JSON.stringify(contentObj);
			},

			parseImgSize: function(item, type) {
				if (type == "h") {
					let height = JSON.parse(item.content).height;
					if (item.contentType == 11 || item.contentType == 12) {
						height = JSON.parse(item.content).fileInfo.height;
						//console.log("附件高度",height);
					}
					if (height == null || height == undefined) {
						return "auto";
					} else {
						return height * 2;
					}
				} else {
					let width = JSON.parse(item.content).width;
					if (item.contentType == 11 || item.contentType == 12) {
						width = JSON.parse(item.content).fileInfo.width;
						//console.log("附件宽度",width);
					}
					if (width == null || width == undefined) {
						return 300;
					} else {
						return width * 2;
					}
				}
			},
			//切换语音或者键盘方式
			switchChatType(type) {
				let that = this;
				if (that.connError) {
					that.globalUtil.utilAlert("您已被踢出群聊");
					return;
				}
				this.chatType = type;
				//底部菜单隐藏
				if (this.showFunBtn == true) {
					this.showFunBtn = false;
					that.scrollViewHeight = that.$u.sys().windowHeight - 150;
				}
				//表情弹窗
				if (this.showEmojiBox == true) {
					this.showEmojiBox = false;
					that.scrollViewHeight = that.$u.sys().windowHeight - 150;
				}
				if (type == "voice") {
					this.inputFocusFlag = true;
				} else {
					if (uni.getSystemInfoSync().platform == "android") {
						permission.requestAndroid("android.permission.RECORD_AUDIO"); //Android请求录音权限
					} else {
						permission.requestIOS("record"); //ios请求录音权限
					}
				}
			},
			//切换功能性按钮
			changeDrawer() {
				let that = this;
				that.showEmojiBox = false;
				that.showFunBtn = !that.showFunBtn;
				uni.hideKeyboard();
				if (that.showFunBtn) {
					that.scrollViewHeight = that.$u.sys().windowHeight - 350;
				} else {
					that.scrollViewHeight = that.$u.sys().windowHeight - 150;
				}
			},
			//表情弹窗
			changeEmojiBox: function() {
				let that = this;
				that.showFunBtn = false;
				that.showEmojiBox = !that.showEmojiBox;
				uni.hideKeyboard();
				if (that.showEmojiBox) {
					this.chatType = "voice";
					that.scrollViewHeight = that.$u.sys().windowHeight - 350;
				} else {
					that.scrollViewHeight = that.$u.sys().windowHeight - 150;
				}
			},
			scrollViewScrolling (e) {
				this.toolTipFlag = false;
        this.autoBackToBottom = (this.$u.sys().windowHeight + 300) > (e.detail.scrollHeight - e.detail.scrollTop)
        this.scrollTop = e.detail.scrollTop
			},
			//触摸页面
			hideDrawer() {
				this.toolTipFlag = false;
				if (this.showFunBtn == true) {
					uni.hideKeyboard();
					this.showFunBtn = false;
					this.scrollViewHeight = this.$u.sys().windowHeight - 150;
				}
				if (this.showEmojiBox == true) {
					uni.hideKeyboard();
					this.showEmojiBox = false;
					this.scrollViewHeight = this.$u.sys().windowHeight - 150;
				}
			},
			//点击宫格时触发
			clickGrid(index) {
				let that = this;
				if (that.connError) {
					that.globalUtil.utilAlert("您已被踢出群聊");
					return;
				}
				let id = that.funList[index].id;
				that.inputFocusFlag = false;
				//组合方式清楚
				that.fileRemarkObj.showFlag = false;
				that.fileRemarkObj.fileInfo = null;
				that.fileRemarkObj.tag = "";
				if (id == 1) {
					this.chooseImage();
				} else if (id == 2) {
					this.chooseVideo();
				} else if (id == 3) {
					let chatGroupType = that.vuex_current_group.chatGroupType;
					if (chatGroupType == 0) {
						that.launchSingleCalling(2);
						return;
					} else {
						this.globalUtil.utilAlert("功能尚未开放!");
						return;
						/* this.$u.route({
							url: '/pages/chattingroom/videoCalling',
							params: {
								'userId':that.vuex_userInfo.mobile+"_"+that.vuex_userInfo.id,
								'userSign':that.vuex_userInfo.userSign
							}
						}) */
					}
				} else if (id == 4) {
					console.log("位置");
					//去选择所在位置
					let that = this;
					uni.chooseLocation({
						success: function(res) {
							that.addressObj = res;
							that.addressObj.chooseFlag = true;
							that.sendLocation(that.addressObj);
						},
						fail: function() {
							that.address = {};
							that.address.chooseFlag = false;
						}
					});
					return;
				} else if (id == 5) {
					let chatGroupType = that.vuex_current_group.is_multi;
					if (chatGroupType === 'PRIVATE') {
						this.$u.route({
							url: '/pages/chat/redbag/redbag',
							params: {
								chatGroupId: this.vuex_current_group.id
							},
							animationType: 'slide-in-bottom'
						})
					} else {
						let userLevel=this.vuex_userInfo.level;
						if(userLevel>0){
							console.log("自定义红包值");
							this.$u.route({
								url: '/pages/chat/redbag/custom-redbag-for-group',
								params: {
                  chatGroupId: this.vuex_current_group.id,
                  chatMemberCount: this.vuex_current_group.user_group_relations.length
									// currentChatGroup: JSON.stringify(this.vuex_current_group)
								},
								animationType: 'slide-in-bottom'
							})
						}else{
							this.$u.route({
								url: '/pages/chat/redbag/redbagForGroup',
								params: {
                  chatGroupId: this.vuex_current_group.id,
                  chatMemberCount: this.vuex_current_group.user_group_relations.length
								},
								animationType: 'slide-in-bottom'
							})
						}
					}
					return;
				} else if (id == 6) {
					//console.log("转账");
					//this.globalUtil.utilAlert("功能尚未开放!");
					this.$u.route({
						url: '/pages/chat/chatGroup/forwardFriendToGroup',
						params: {
							currentChatGroupId: this.vuex_current_group.id
						},
						animationType: 'slide-in-bottom'
					})
					return;
				} else if (id == 7) {
					console.log("语音通话");
					let chatGroupType = that.vuex_current_group.chatGroupType;
					if (chatGroupType == 0) {
						that.launchSingleCalling(1);
						return;
					} else {
						this.globalUtil.utilAlert("功能尚未开放!");
						return;
						/* this.$u.route({
							url: '/pages/chattingroom/videoCalling',
							params: {
								'userId':that.vuex_userInfo.mobile+"_"+that.vuex_userInfo.id,
								'userSign':that.vuex_userInfo.userSign
							}
						}) */
					}
				} else if (id == 8) {
					this.chooseFile();
					return;
				} else {
					this.globalUtil.utilAlert("功能尚未开放!");
					return;
				}
			},
			//单聊发起音视频通话  type 1:语音通话 2视频通话
			launchSingleCalling: function(type) {
				let that = this;
				let remoteUserIds = [];
				let chatGroupId = that.vuex_current_group.id;
				let param = {
					chatGroupId: that.vuex_current_group.id
				};
				that.$u.api.chatGroup.getChatGroupTrcMembers(param).then(res => {
					if (res.code == 200) {
						let groupMemberList = res.data;
						if (groupMemberList.length > 0) {
							for (let i = 0; i < groupMemberList.length; i++) {
								let trcUserId = groupMemberList[i].trcRemoteUserId;
								remoteUserIds.push(trcUserId);
							}
						}
						console.log("remoteUserIds", remoteUserIds);
						let callResult= this.trcApi.singleCall(remoteUserIds[0],type);
						that.trcApi.listenCallStatus({
							onError:function(res){
								console.log(res);
							},
							onCallReceived:function(res){
								console.log(res);
							},
							onCallCancelled:function(res){
								console.log(res);
							},
							onCallBegin:function(res){
								console.log(res);
							},
							onCallEnd:function(res){
								console.log(res);
							},
						});
					} else {
						that.globalUtil.utilAlert("音视频通话远程用户信息获取失败");
						return;
					}
				})
			},

			onCallEnd: function(res) {
				let that = this;
				let result = "";
				let callRole = "";
				if (that.platos == "ios") {
					result = res.data;
					callRole = result[3];
				} else {
					result = res;
					callRole = res.callRole;
				}
				if (callRole == 0) {
					let param = {
						roomID: '',
						type: '1', //1是音频 2是视频
						totalTime: 0, //通话时长
						targetUserID: '', //对方userId
						fromUserId: '',
						callRole: 0, //0 是主叫 1被叫
					}
					if (that.platos == "ios") {
						param.totalTime = result[4];
						param.callRole = result[3];
						param.type = result[2];
						param.roomID = result[1];
						param.targetUserID = result[0][0];
						param.fromUserId = that.vuex_userInfo.id;
					} else {
						param.totalTime = result.totalTime;
						param.callRole = result.callRole;
						param.type = result.type;
						param.roomID = result.roomID;
						param.targetUserID = result.userIDs[0];
						param.fromUserId = that.vuex_userInfo.id;
					}
					console.log("音视频通话记录保存", param);
					that.videoMsgFlag = false;
					let videoMsgTimmer = setTimeout(function() {
						that.videoMsgFlag = true;
						clearTimeout(videoMsgTimmer);
					}, 3000);
					//that.sendMsg(1, 13, param);
				}
			},

			//发送位置
			sendLocation: function(addressObj) {
				let that = this;
				console.log("that.address", that.addressObj);
				that.sendMsg(1, 9, that.addressObj);
			},
			//重置复合信息
			resetComponentInfo: function() {
				let that = this;
				that.fileRemarkObj.fileInfo = null;
				that.fileRemarkObj.showFlag = false;
				that.fileRemarkObj.tag = "";

			},
			//选照片 or 拍照
			chooseImage() {
				uni.chooseImage({
					count: 6,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
            this.sendLoading = true
            const list = []
            let index = 0
						for (const filePath of res.tempFilePaths) {
							await new Promise(resolve => {
                uni.getImageInfo({
                  src: filePath,
                  success: async (image) => {
                    const path = await uploader({
                      file_key: res.tempFiles[index].name || res.tempFiles[index].path,
                      file_path: filePath,
                    })
                    console.log('path', path)
                    let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
                    let maxH = uni.upx2px(350); //350是定义消息图片最大高度
                    if (image.width > maxW || image.height > maxH) {
                      let scale = image.width / image.height;
                      image.width = scale > 1 ? maxW : maxH * scale;
                      image.height = scale > 1 ? maxW / scale : maxH;
                    }
                    list.push({
                      path: path,
                      width: image.width,
                      height: image.height
                    })
                    resolve(path)
                  }
                })
              })
              index++
						}
            await this.sendMsg('USER', 'IMAGE', {
              qs: list
            })
            uni.hideLoading()
					},
					async fail(e) {
						console.log(e, "选择图片上传发送异常");
            if (/permission/ig.test(e.errMsg)) {
              await $confirm('需要获取您的相册权限，请手动去开启', '提示', '取消', '现在就去')
              uni.openAppAuthorizeSetting()
              return
            }
					}
				});
			},
			//选择视频或者 拍摄视频
			chooseVideo() {
				let that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed: true,
					success: async (res) =>  {
						let tempFilePath = res.tempFilePath;
						console.log("tempFilePath", res);
						if (!tempFilePath) {
							that.globalUtil.utilAlert("失败!");
							return;
						}
            this.sendLoading = true

            const img = await getVideoCover(tempFilePath, {w: res.width, h: res.height}, 0.5)
            console.log('img:', img)
            const coverPath = await uploader({file_key: 'cover.webp', file_path: img, file_path_type: 'base64'})
            console.log('cover:', coverPath)
            const videoPath = await uploader({file_key: 'xx.mp4', file_path: tempFilePath})
            console.log('videoPath:', videoPath)
            this.sendMsg('USER', 'VIDEO', {
              c: coverPath,
              v: videoPath,
              w: res.width,
              h: res.height
            })
					},
          async fail (e) {
						console.log(e, "发起视频异常");
            if (/permission/ig.test(e.errMsg)) {
              await $confirm('需要获取您的相机权限，请手动去开启', '提示', '取消', '现在就去')
              uni.openAppAuthorizeSetting()
              return
            }
          }
				});
			},
      
			//选择文件
			chooseFile() {
				let that = this;
        // fileSelect({
        //   permission: true,
        //   success: async (res) => {
        //     console.log(111, res)
        //   },
        //   fail (err) {
        //     console.log('err:', err)
        //   }
        // })
        uni.navigateTo({
          url: '/pages/chat/chooseFileList/h5File'
        })
				// this.$u.route({
				// 	url: '/pages/chat/chooseFileList/h5File',
				// 	params: {
				// 		chatGroupId: that.vuex_current_group.id
				// 	}
				// });
			},

			openLocation: function(item) {
				let that = this;
				let contentObj = JSON.parse(item.content);
				uni.openLocation({
					latitude: contentObj.latitude,
					longitude: contentObj.longitude,
					name: contentObj.name,
					address: contentObj.address,
					success: function() {
						console.log('success');
					}
				});
			},
			showTimeJudge: function(item, index) {
				let dayTime = item.created_at.substring(5, 10);
				let firstTime = this.messageList[0].created_at.substring(5, 10);
				if (firstTime == dayTime) {
					return false
				}
				if (this.messageList.length > 0 && index > 0) {
					let lastDayTime = this.messageList[index - 1].created_at.substring(5, 10);
					if (dayTime == lastDayTime) {
						return false
					} else {
						return true;
					}
				} else {
					return false
				}
			},
			openRedBag: function(item, index) {
				let that = this;
				let conentStr = this.messageList[index].content;
				let contentObj = JSON.parse(conentStr);
				console.log("item", item);
				console.log("contentObj", contentObj);
				if (contentObj.redBagType == 0) {
					this.openSingleGroupRedBag(item, contentObj, index);
					return;
				} else {
					this.openGroupRedBag(item, contentObj, index);
					return;
				}
			},
			//领取单聊的红包
			openSingleGroupRedBag: function(item, contentObj, index) {
				let that = this;
				if (contentObj.fromUser == this.vuex_userInfo.id) {
					console.log("自己不能领取自己发出的红包");
					contentObj.avatar = item.userAvatar;
					that.showRedPopFlag = true;
					that.currentRedBag = contentObj;
					that.currentRedBag.redBagNums = 1;
					return;
				} else {
					if (contentObj.receiveAllFlag == false) {
						that.$u.api.chatGroup.receviceRedBag(item).then(res => {
							if (res.code == 200) {
								console.log("红包已被领取");
								contentObj.receiveAllFlag = true;
								this.messageList[index].content = JSON.stringify(contentObj);
							}
						})
					} else {
						console.log("红包已经被领取");
						contentObj.avatar = item.userAvatar;
						this.showRedPop(contentObj);
					}
				}
			},
			//是否领取过
			isReceive: function(item) {
				let that = this;
				let contentObj = JSON.parse(item.content);
				let receiveUsers = contentObj.receiveUsers;
				if (receiveUsers != null && receiveUsers != undefined) {
					for (var i = 0; i < receiveUsers.length; i++) {
						let receiveInfo = receiveUsers[i];
						let receiveUserId = receiveInfo.userId;
						if (receiveUserId == that.vuex_userInfo.id) {
							//that.globalUtil.utilAlert("您已经领取过红包~");
							return true;
						}
					}
				};
				return false;
			},

			//领取群聊红包
			openGroupRedBag: function(item, contentObj, index) {
				let that = this;
				let receiveUsers = contentObj.receiveUsers;
				if (receiveUsers != null && receiveUsers != undefined) {
					for (var i = 0; i < receiveUsers.length; i++) {
						let receiveInfo = receiveUsers[i];
						let receiveUserId = receiveInfo.userId;
						if (receiveUserId == that.vuex_userInfo.id) {
							contentObj.avatar = item.userAvatar;
							this.showRedPop(contentObj);
							return;
						}
					}
				}
				if (contentObj.receiveAllFlag == false) {
					that.$u.api.chatGroup.receviceRedBagForGroup(item).then(res => {
						console.log("领取群聊红包结果", res);
						if (res.code == 200) {
							if (res.data == 1) {
								//contentObj.receiveAllFlag=true;
								if (contentObj.receiveUsers != null && contentObj.receiveUsers != undefined) {
									contentObj.receiveUsers.push({
										userId: this.vuex_userInfo.id
									});
								} else {
									contentObj.receiveUsers = [{
										userId: this.vuex_userInfo.id
									}];
								}
								this.messageList[index].content = JSON.stringify(contentObj);
							}
							if (res.data == -1) {
								that.globalUtil.utilAlert("您已经领取过红包~");
								contentObj.receiveAllFlag = true;
								this.messageList[index].content = JSON.stringify(contentObj);
								return;
							}
							if (res.data == -2 || res.data == -3) {
								if (res.data == -2) {
									that.globalUtil.utilAlert("手速太慢,红包已被领完~");
								}
								contentObj.receiveAllFlag = true;
								this.messageList[index].content = JSON.stringify(contentObj);
								return;
							}
						}
					})
				} else {
					console.log("手速太慢.红包已经被领完");
					//that.globalUtil.utilAlert("手速太慢.红包已经被领完");
					contentObj.avatar = item.userAvatar;
					this.showRedPop(contentObj);
					return;
				}
			},

			showRedPop: function(contentObj) {
				let that = this;
				//that.globalUtil.utilAlert("您已经领取过红包~");
				that.receiveRedBagList = [];
				that.currentRedBag = {};
				that.$u.api.chatGroup.getRedBagReceiveList(contentObj).then(res => {
					console.log("获取红包领取记录", res);
					if (res.code == 200) {
						that.showRedPopFlag = true;
						that.currentRedBag = contentObj;
						console.log("currentRedBag.avatar", that.currentRedBag.avatar);
						that.receiveRedBagList = res.data;
					}
				})
			},

			previewFile: function(item) {
				let fileObj = JSON.parse(item.content);
				let url = fileObj.url
				if (url) {
					console.log("url", url);
					if (fileObj.fileType == "img") {
						uni.previewImage({
							urls: [url],
						});
						return;
					} else if (fileObj.fileSuffix === 'mp4') {
						this.previewVideoSrc = url;
						this.previewVideoFlag = true;
						return;
					} else {
						uni.downloadFile({
							url: url,
							success: function(res) {
								var filePath = res.tempFilePath;
								uni.openDocument({
									filePath: filePath,
									showMenu: true,
									success: function(res) {
										console.log('打开文档成功');
									},
									error: function(error) {
										console.log("文件打开失败", error);
										this.globalUtil.utilAlert("暂不支持查看");
										return;
									}
								});
							}
						});
					}
				}
			},

			showPic(item, img) {
        console.log(item.content.qs.map(s => s.path), img.path)
        uni.previewImage({
          current: img.path,
          indicator: 'default',
          urls: item.content.qs.map(s => s.path)
        })
			},
			//播放视频
			boFangVideo: function(item) {
        console.log(item, 1)
				let that=this;
				let msgId= item.id;
				let localSrc= uni.getStorageSync("video"+msgId);
				if(localSrc){
					console.log("视频本地缓存",localSrc);
					this.previewVideoSrc=localSrc;
					this.previewVideoFlag=true;
				}else{
					let videoContent = item.content;
					let videoSrc= videoContent.v;
					this.previewVideoSrc=videoSrc;
					this.messageApi.setVideoLocalSrc(videoSrc,msgId);
					this.previewVideoFlag=true;
				}
			},
			//关闭播放视频
			stopPlayVideo: function() {
				this.previewVideoFlag = false;
			},
			//查看群成员信息
			async showPersonalInfo (item) {
				const user = item.user
				if (item.meFlag == true) {
					return;
				}

        if (this.currentUserRelation.right === 'REJECT') return this.globalUtil.utilAlert("你已被踢出群聊!");
				
				if (user.id === this.vuex_userInfo.id) {
          this.$u.route({
            url: 'pages/chat/friends/friendHome',
            params: {user_id:user.id}
          });
          return
        }
        const res = await this.$u.api.imUser.checkIsFriends({friend_id: user.id})
        if (res.data) {
          this.$u.route({
            url: 'pages/chat/friends/friendHome',
            params: {user_id:user.id}
          });
        } else {
          this.$u.route({
            url: '/pages/chat/friends/newFriendInfo',
            params: {newFriendInfo: encodeURIComponent(JSON.stringify(user)),fromPage:2}
          });
        }
			},
			formatForwardUserInfo: function(item) {
				let that = this;
				let forwardUser = JSON.parse(item.content);
				let currentUserId = that.vuex_userInfo.id;
				if (forwardUser.id == currentUserId) {
					return "我";
				} else {
					return forwardUser.userName;
				}
			},
			//解析聊天记录类型的标题
			parseChatRecordTitle: function(item) {
				//console.log("item",item);
				let title = "聊天记录";
				let titleSet = new Set();
				let obj = JSON.parse(item.content);
				for (let i = 0; i < obj.length; i++) {
					let userName = obj[i].userName;
					titleSet.add(userName);
				}
				let userNames = Array.from(titleSet);
				if (userNames.length < 3) {
					return userNames.join("与") + "的聊天记录";
				} else {
					return title;
				}
			},

			//解析群聊记录
			parseChatRecord: function(content) {
				let userName = content.userName;
				let contentType = content.contentType;
				let innerContent = content.content;
				let str = userName + ": [不可识别的信息类型]";
				switch (contentType) {
					case 1:
						let text = JSON.parse(innerContent).text;
						text = text.replace(/face/g, '');
						//let transText= this.globalUtil.transform(text, "", "");
						str = userName + ": " + text;
						break;
					case 2:
						str = userName + ": [图片]";
						break;
					case 3:
						str = userName + ": [视频]";
						break;
					case 4:
						str = userName + ": [语音]";
						break;
					case 5:
						str = userName + ": [文件]";
						break;
					case 7:
						str = userName + ": [红包]";
						break;
					case 8:
						str = userName + ": [名片]";
					case 9:
						str = userName + ": [位置]";
						break;
					case 10:
						str = userName + ": [聊天记录]";
						break;
					case 11:
						str = userName + ": [图文信息]";
						break;
					case 12:
						str = userName + ": [视频文字混合]";
						break;
					default:
						break;
				}
				return str;
			},
			//查看聊天记录
			openChatRecord: function(item, index) {
				let that = this;
				let navbarTitle = this.parseChatRecordTitle(item);
				console.log("查看聊天记录", item);
				that.$u.route({
					url: '/pages/chat/chatting/chat-record-content',
					params: {
						chatRecordContentObj: encodeURIComponent(JSON.stringify(item)),
						navbarTitle: navbarTitle
					},
					animationType: 'slide-in-bottom'
				})
			},
			showUserInfoFromForward: function(item) {
				let that = this;
				console.log("群成员信息", item);
				let fromUserId = item.fromUserId;
				let groupUserId = JSON.parse(item.content).id;
				//如果是自己,就不用处理了
				if (fromUserId == groupUserId) {
					return;
				}
				let currentUserId = that.vuex_userInfo.id;
				if (groupUserId == currentUserId) {
					return;
				}
				let param = {
					groupUserId: groupUserId
				}
				//根据userId去查询是否是好友
				that.$u.api.imUser.getGroupMemberInfo(param).then(res => {
					if (res.code == 200) {
						let groupUserInfo = res.data;
						console.log("查询群成员信息结果", groupUserInfo);
						if (groupUserInfo.isFriend) {
							that.$u.route({
								url: 'pages/chat/friends/friendHome',
								params: {
									friendId: groupUserId
								},
							})
						} else {
							console.log("不是朋友关系");
							this.$u.route({
								url: '/pages/chat/friends/newFriendInfo',
								params: {
									newFriendInfo: encodeURIComponent(JSON.stringify(groupUserInfo)),
									fromPage: 1
								}
							});
						}
					}
				})
			},

			closeAdvFlag: function() {
				let that = this;
				let param = {
					chatGroupId: that.vuex_current_group.id,
					hiddenFlag: 0
				}
				that.$u.api.chatGroup.updateMyChatGroupInfo(param).then(res => {
					if (res.code == 200) {
						console.log("关闭公告");
						that.vuex_current_group.advShowFlag = 0;
					} else {
						that.globalUtil.utilAlert("error");
						return;
					}
				})
			},
			loginOut: function() {
				let that = this;
				that.closeWebScoket();
				//调用service请求后台的接口
				this.$u.api.sys.loginOut({}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.globalUtil.clearVuex(that);
						setTimeout(function() {
							that.$u.route({
								type: 'reLaunch',
								url:"/pages/start/wx-login", //  "/pages/index/login",
								params: {}
							})
						}, 500);
						return;
					} else {
						//密码错误提示
						this.globalUtil.utilAlert(res.message, "none");
						return;
					}
				}).catch(res => {
					this.globalUtil.utilAlert("后台请求失败,请联系管理员!");
				})
			},
			closeQRModel: function() {
				this.qrModelInfo = {};
				this.qrModelFlag = false;
			},
			//将图片，视频信息放入缓存中
			saveLocal:function(messageObj){
				let that=this;
				let msgId= messageObj.id;
				let contentType= messageObj.contentType;
				let contentObj=JSON.parse(messageObj.content);
				switch (contentType+''){
					case "2":
						let url =contentObj.url;
						that.messageApi.setImageLocalSrc(url,msgId);
						break;
					case "3":
						let subImgInfo = contentObj.subImgInfo;
						if (subImgInfo) {
							let url= subImgInfo.url;
							that.messageApi.setImageLocalSrc(url,msgId);
						}
						break;
					case "4":
						break;
					case "11":
						break;
					case "12":
						break;
					default:
						break;
				};
			},
      watchInputMention (e) {
        const inputWord = e.detail.value.slice(e.detail.cursor - 1, e.detail.cursor)
        if (this.l__cursor > e.detail.cursor) {
          const backWord = this.__oldValue.slice(e.detail.cursor, this.l__cursor)
          if (backWord === ' ') {
            let index = e.detail.cursor
            let mentionIndex = this.sendStr.slice(0, e.detail.cursor).split(' ').length - 1

            while (index < this.l__cursor && index >= -1) {
              if (this.__oldValue[index] === '@') {
                break
              }
              index--
            }
            if (index >= 0) {
              this.sendStr = e.detail.value.substring(0, index) + e.detail.value.substring(e.detail.cursor)
              this.contextMentions.splice(mentionIndex, 1)
            }
          }
        }
        this.__oldValue = this.sendStr
        this.l__cursor = e.detail.cursor
        if (inputWord === '@') {
          this.countMentionIndex = this.sendStr.slice(0, e.detail.cursor).split(' ').length - 1
          console.log(this.countMentionIndex, 333)
          this.showMention = true
          this.inputFocusFlag = false
        } else {
          this.showMention = false
        }
      },
      finishMention(){
        this.showMention = false
        let mentionStr = ''
        this.mentionSelect.forEach(s => {
          mentionStr += `@${this.getUserNameOrRemark(s)} `
        })
        const before = this.sendStr.slice(0, this.l__cursor - 1)
        const after = this.sendStr.slice(this.l__cursor)
        
        this.sendStr = `${before}${mentionStr}${after}`
        this.__oldValue = this.sendStr
        this.l__cursor = `${before}${mentionStr}`.length
        if (!this.contextMentions) {
          this.contextMentions = [...this.mentionSelect]
        } else {
          this.contextMentions.splice(this.countMentionIndex, 0, ...this.mentionSelect)
        }
        this.mentionSelect = []
        this.$nextTick(() => {
          this.inputFocusFlag = true
        })
      },
      handleLink(item) {
        if (item.content.l) {
          uni.navigateTo({
            url: '/pages/webview/web-view?url=' + encodeURIComponent(item.content.l)
          })
        }
      }
		},
	};
</script>

<style lang="scss" scoped>
	@import './chatting.scss';

	.chatting-container { height: 100vh; display: flex; flex-direction: column; overflow: hidden;
		.custom-navbar {
			width: 100%;
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			padding: 0 30rpx;

			.nav-left {}

			.nav-center {
				font-size: 36rpx;
				font-weight: bold;
			}

			.nav-right {}
		}

		.msg-container {
			width: 100%; flex: 1; position: relative;

			.msg-box-scroller {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
				max-height: 100%;
        direction: ltr;
				transform:rotate(180deg);
				::-webkit-scrollbar {
					display: none;
					height: 0;
					width: 0;
				}

				.message {
					padding: 13rpx 20rpx;
					direction: ltr;transform:rotate(180deg); display: flex; flex-direction: column;
				}

				.message-item {
					font-size: 32rpx;
					color: #000000;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					align-content: flex-start;
					flex-wrap: nowrap;
					flex-direction: row;

					.marginLeft-100 {
						margin-right: 110rpx;
					}

					.margentRight-100 {
						margin-left: 110rpx;
					}

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 5rpx;
					}

					.content {
						padding: 25rpx 20rpx;
						max-width: 500rpx;
						border-radius: 10rpx;
						font-size: 32rpx;
						word-break: break-word;

						//margin-top: 10rpx;
						.richTextImg {

							//border: 1px solid red;
							.emoji {
								//border: 1px solid black;
								position: relative;
								top: 1px;
								width: 26px;
								height: 26px;
							}
						}
					}

					// 语音
					.contentType2 {
						display: flex;
						flex-direction: row;
						align-items: center;

						.voice_icon {
							height: 34rpx;
							width: 34rpx;
							background-repeat: no-repeat;
							background-size: 100%;
						}

						.voice_icon_right {
							background-image: url(@/static/voice-left-3.png);
							margin-left: 10rpx;
						}

						.voice_icon_left {
							background-image: url(@/static/voice-right-3.png);
							margin-right: 10rpx;
						}

						.voice_icon_right_an {
							animation: voiceAn_right 1s linear alternate infinite;
						}

						.voice_icon_left_an {
							animation: voiceAn_left 1s linear alternate infinite;
						}

						@keyframes voiceAn_right {
							0% {
								background-image: url(@/static/voice-left-1.png);
							}

							50% {
								background-image: url(@/static/voice-left-2.png);
							}

							100% {
								background-image: url(@/static/voice-left-3.png);
							}
						}

						@keyframes voiceAn_left {
							0% {
								background-image: url(@/static/voice-right-1.png);
							}

							50% {
								background-image: url(@/static/voice-right-2.png);
							}

							100% {
								background-image: url(@/static/voice-right-3.png);
							}
						}
					}

					//图片
					.content.contentType3, &.right .content.contentType3 {
						padding: 0;
						border-radius: 2rpx;
            max-width: 400rpx; display: flex; flex-wrap: wrap;

						.img {
						}
					}

					.contentType3::after {
						border: none !important;
						display: none !important;
					}

					.contentType5 {
						width: 450rpx;
						padding: 0;
						border-radius: 10rpx;
						//background-color: transparent !important;
						border: 1rpx solid #e4e7ed;
						background-color: #ffffff !important;
					}

          .content-type-link{
            width: 450rpx; padding: 0;
						border: 1rpx solid #e4e7ed;
						background-color: #ffffff !important; display: flex;
            padding: 12rpx;
            .info{ width: 360rpx; font-size: 22rpx;}
            .desc{ color: #ccc;}
            
          }

					.contentType3::after {
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-left: 16rpx solid #ffffff !important;
					}

					.contentType-fixed {
						padding: 20;
						border-radius: 6rpx;
						background-color: #95ec69 !important;
						border: 1rpx solid #e4e7ed;
						max-width: 400rpx;

						.img {
							width: 200rpx;
							height: auto;
							max-width: 300rpx;
							max-height: 400rpx;
						}
					}

					.contentType-fixed::after {
						border: none !important;
						display: none !important;
					}


					.contentType6 {
						padding: 20rpx 30rpx;
						padding-bottom: 6rpx;
						border-radius: 10rpx;
						background-color: #f29100;
						color: #ffffff;
					}

					.contentType9 {
						width: 500rpx;
						padding: 0rpx 10rpx;
						border-radius: 10rpx;
						border: 1rpx solid #e4e7ed;
						background-color: #ffffff !important;
					}

					.content-type-right {
						flex-direction: row-reverse;
					}

					&.right {
						flex-direction: row-reverse;

						.content {
							background-color: #95ec69;
							margin-right: 28rpx;
							word-break: break-all;
							line-height: 36rpx;
							position: relative;

							&::after {
								content: '';
								display: block;
								width: 0;
								height: 0;
								border-top: 10rpx solid transparent;
								border-bottom: 10rpx solid transparent;
								border-left: 16rpx solid #95ec69;
								position: absolute;
								right: -16rpx;
								top: 30rpx;
							}
						}

						.contentType5 {
							background-color: #ffffff !important;

							&::after {
								border-left: 16rpx solid #fff !important;
							}
						}

						.contentType9 {
							background-color: #ffffff !important;

							&::after {
								border-left: 16rpx solid #fff !important;
							}
						}

						.contentType6 {
							background-color: #f29100;

							&::after {
								border-left: 16rpx solid #f29100;
							}
						}


					}

					&.left {
						.content {
							background-color: #ffffff;
							margin-left: 28rpx;
							word-break: break-all;
							line-height: 36rpx;
							position: relative;

							&::after {
								content: '';
								display: block;
								width: 0;
								height: 0;
								border-top: 10rpx solid transparent;
								border-bottom: 10rpx solid transparent;
								border-right: 16rpx solid #ffffff;
								position: absolute;
								left: -16rpx;
								top: 30rpx;
							}
						}

						.contentType6 {
							background-color: #f29100;

							&::after {
								border-right: 16rpx solid #f29100;
							}
						}

						.contentType9 {
							background-color: #ffffff !important;

							&::after {
								border-right: 16rpx solid #ffffff !important;
							}
						}
					}
				}

			}
		}

		.textArea-box {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 10upx;
			//padding-left: 30upx;
			min-height: 70upx;
			display: flex;
			align-items: center;

			textarea {
				width: 100%;
			}
		}

		.inputScroll {
			max-height: 180upx;
		}

		.bongfang {
			background-color: transparent;
		}



	}

	.showRedPopScrollView {

		//border: 1px solid red;
		::-webkit-scrollbar {
			display: none;
			height: 0;
			width: 0;
		}
	}
	.red-pop-head{
		//border: 1px solid black;
		width: 750rpx;
		height:280rpx;
		background-image: url('/static/image/chat/red-bg-1.png');
		background-repeat: no-repeat;
		background-size: 100%;
		padding-top:88rpx;
	}
</style>
<style>
	page {
		background-color: #f1f1f1;
	}
</style>
